<template>
  <div class="sjplatformSelectForm">
    <el-form :inline="true">
      <el-form-item label="项目名称">
        <el-input v-model="changeData.queryCondition.projectName" placeholder="请输入名称..." />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="openEditForm('add', null)">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="sjplatformtable">
    <el-table :data="changeData.tableData" v-loading="loading" empty-text="暂无数据" stripe border>
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 + (currentPage - 1) * pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="changeName" label="变更名称" class-name="left-align">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.changeName" placement="top">
            <span>{{ row.changeName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" class-name="left-align">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.projectName" placement="top">
            <span>{{ row.projectName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="managerName" label="项目经理" width="100" />
      <el-table-column prop="createTime" label="发起时间" width="140">
        <template #default="{ row }">
          <span>{{ commonUtil.Methods.formatDate(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createUserName" label="发起人" width="100" />
      <el-table-column prop="status" label="状态" width="140">
        <template #default="{ row }">
          <div :class="getStatusStyle(row.status)"> {{
            getStatusEnumChineseByValue(row.status, ProcessEnum.Change) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-tooltip content="查看项目详情" placement="bottom" effect="light">
            <i class="detail-icon" @click="showDetail(row.projectId)"></i>
          </el-tooltip>
          <!-- <el-tooltip v-if="row.status == null || row.status == StatusEnum.Creating" content="团队资源设置" placement="bottom"
              effect="light">
              <i class="change-icon" @click="setChange(row)"></i>
            </el-tooltip>
            <el-tooltip v-if="row.status > StatusEnum.Creating" content="查看团队资源" placement="bottom" effect="light">
              <i class="approvedetail-icon" @click="showChange(row)"></i>
            </el-tooltip>
            <el-tooltip content="提交审批" v-if="row.status == StatusEnum.Creating" placement="bottom" effect="light">
              <i class="submit-icon" @click="submitForReview(row)"></i>
            </el-tooltip>
            <el-tooltip content="撤回审批" v-if="row.status == StatusEnum.SubmitApproval" placement="bottom" effect="light">
              <i class="revocation-icon" @click="withdrawReview(row)"></i>
            </el-tooltip> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="changeData.total" :page-size="pageSize"
      :current-page="currentPage" @current-change="handleCurrentChange" />
  </div>
  <el-drawer v-model="isShowDetail" direction="rtl" :before-close="handleDrawerClose">
    <template #header="{ titleId }">
      <h4 :id="titleId">项目详情</h4>
    </template>
    <ProjectDetail :projectId="projectId" />
    <template #footer>
      <el-row>
        <el-col :span="24" class="align-right-buttons">
          <div>
            <el-button type="primary" @click="isShowDetail = false">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </template>
  </el-drawer>
  <el-dialog v-model="newProjectChangeTableVisible" :title="formTitle" width="70%" draggable :destroy-on-close="true">
    <ChangeAddOrUpdate />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="operateProjectChange">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ProjectDetail from "../Common/ProjectDetail.vue";
import commonUtil from "../../../utils/common";
import { useProjectChange } from "../../../hooks/ProjectManager/Supervisor/useProjectChange";
import ChangeAddOrUpdate from "./ChangeAddOrUpdate.vue";
import { ProcessEnum, getStatusEnumChineseByValue, getStatusStyle } from "../../../hooks/Common/useStatusEnum";

let newProjectChangeTableVisible = ref(false);
let formTitle = ref('新增项目变更');
let addOrUpdate = ref("add"); //新增还是修改
let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let loading = ref(false);
let isShowDetail = ref(false);
let projectId = ref('');

let { changeData, projectStore, getProjectChanges } = useProjectChange(currentPage, pageSize);
getProjectChanges();


//查看详情
function showDetail(value) {
  projectId.value = value;
  isShowDetail.value = true;
}

//打开编辑窗口
function openEditForm(value, data) {
  addOrUpdate.value = value;
  if (value == "add") {
    formTitle.value = "新增项目变更";
    projectStore.resetProjectSettingModel();
  }
  if (value == "edit") {
    formTitle.value = "修改项目变更";
    projectStore.projectSettingModel = data;
  }
  newProjectChangeTableVisible.value = true;
}
//新增或修改
async function operateProjectChange() {
  // if (addOrUpdate.value == "add") {
  //     if (await addData()) {
  //         commonUtil.Methods.ShowMessage("success", "新增项目设置成功！");
  //         newProjectSettingTableVisible.value = !newProjectSettingTableVisible.value;
  //     } else {
  //         commonUtil.Methods.ShowMessage("Oops", "新增项目设置失败！");
  //     }
  // }
  // if (addOrUpdate.value == "edit") {
  //     if (await updateData()) {
  //         commonUtil.Methods.ShowMessage("success", "修改项目设置成功！");
  //         newProjectSettingTableVisible.value = !newProjectSettingTableVisible.value;
  //     } else {
  //         commonUtil.Methods.ShowMessage("Oops", "修改项目设置失败！");
  //     }
  // }
  // searchData();
}


//翻页事件
function handleCurrentChange(newPage) {
  currentPage.value = newPage;
  searchData(); // 根据当前页获取数据
}

//查询按钮
function searchData() {
  loading.value = true;
  currentPage.value = 1;
  getProjectChanges();
  loading.value = false;
}

//重置按钮
function reset() {
  projectStore.resetChangeModel();
}
//取消新增窗口
function cancel() {
  projectStore.resetChangeModel();
  newProjectChangeTableVisible.value = !newProjectChangeTableVisible.value;
}

function handleDrawerClose() {
  projectId.value = '';
  isShowDetail.value = false;
}
</script>